<template>
  <view class="person-card">
    <view class="p-top" v-if="isMyCollect">
      <slot name="header"></slot>
    </view>

    <view class="p-title">
      <view class="title-con" @click="toDetail">
        <text :class="genderClass">{{ info?.gender }}·{{ info?.year }}年</text>
        <template v-if="!isMyCollect">
          <image
            :src="todayImgUrl"
            mode="scaleToFill"
            class="more-icon"
            v-if="todayImgUrl"
          />
        </template>
        <custom-realname :realname="info.realname"></custom-realname>
      </view>
      <icon-card
        :info="info"
        :ids="iconIds"
        :icon-type="iconType"
        v-if="!isMyCollect"
      ></icon-card>
    </view>

    <view @click="toDetail">
      <desc-card :info="info"></desc-card>
    </view>
    <!-- 照片 -->
    <image-card
      :imgs="info?.imgs"
      :look="info?.look"
      :id="info.id"
    ></image-card>

    <!-- 家长 -->
    <view @click="toDetail">
      <parent-card :info="info"></parent-card>
    </view>

    <!-- 按钮 -->
    <btns-card :info="info" v-if="isBtns"></btns-card>
    <!-- 描述 -->
    <slot name="footer"></slot>
  </view>
</template>

<script setup>
// 引入组件
import DescCard from "@/components/person/desc-card.vue";
import ImageCard from "@/components/person/image-card.vue";
import BtnsCard from "@/components/person/btns-card.vue";
import IconCard from "@/components/person/icon-card.vue";
import ParentCard from "@/components/person/parent-card.vue";
// 引入api
import { getItem } from "@/utils/storage";
import useStore from "@/store";
import yesdayImg from "@/static/index/yesday.svg";
import todayImg from "@/static/index/today.svg";

const { person } = useStore();
const pageType = inject("pageType", "");
const props = defineProps({
  info: {
    type: Object,
    default: () => {},
  },
  iconType: {
    type: String,
    default: "",
  },
  isBtns: {
    type: Boolean,
    default: true,
  },
  isMyCollect: {
    type: Boolean,
    default: false,
  },
});

const genderClass = computed(() => {
  const cObj = {
    男: "boy-text",
    女: "girl-text",
  };
  return cObj[props.info?.gender];
});
const iconIds = computed(() => {
  const { id, collect, look } = props.info || {};
  return { user_id: id, collect, look };
});

const todayImgUrl = computed(() => {
  const obj = {
    1: yesdayImg,
    2: todayImg,
  };
  return obj[props.info?.yesday];
});

const toDetail = () => {
  const { appLogin, phone } = getItem("user_info") || {};
  if (!appLogin) {
    uni.navigateTo({ url: "/subPages/register/index" });
    return;
  }

  if (!phone) {
    uni.navigateTo({ url: "/subPages/register/contact" });
    return;
  }
  if (pageType == "my") return;
  person.updatePersonId(iconIds.value);
  uni.navigateTo({ url: "/subPages/details/index" });
};
</script>

<style lang="scss" scoped>
@import "@/styles/global.scss";
.person-card {
  background: #fff;
  border-radius: 30rpx;
  margin: 20rpx;
  padding: 40rpx 30rpx;
  position: relative;
  .p-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 52rpx;
    font-weight: bold;
    .title-con {
      flex: 1;
    }
  }
  .more-icon {
    width: 160rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }

  .p-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    .c-update {
      padding: 5rpx 20rpx;
      font-weight: 500;
      font-size: 24rpx;
      color: #ff5c55;
      background: rgba(255, 92, 85, 0.1);
      border-radius: 40rpx;
    }
  }
}
</style>
